<!-- 个人信息 -->
<template>
    <el-divider content-position="left">个人基础信息</el-divider>
    <el-form :model="memberInfoData" style="width:95%;padding:0 20px;margin: 0 auto;" class="form-mainInfo">
        <el-row  >
            <el-col :span="12">
            <el-form-item label="IIFA ID：">
                <el-input v-model="memberInfoData.igAasId" placeholder="IIFAID" clearable disabled size="large" />
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="邮箱：">
                <el-input v-model="memberInfoData.email" placeholder="邮箱：" clearable disabled size="large" />
            </el-form-item>
            </el-col>
        </el-row>
        <el-row >
            <el-col :span="12">
            <el-form-item label="姓名：">
                <el-input v-model="memberInfoData.name" placeholder="姓名：" clearable :disabled="!isEdit" size="large" />
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="电话：">
                <el-input v-model="memberInfoData.phone" placeholder="电话：" clearable :disabled="!isEdit" size="large" />
            </el-form-item>
            </el-col>
        </el-row>
        <el-row >
            <el-col :span="12">
            <el-form-item label="姓（英文）：">
                <el-input v-model="memberInfoData.surname" placeholder="姓（英文）" clearable :disabled="!isEdit" size="large" />
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="名（英文）：">
                <el-input v-model="memberInfoData.egName" placeholder="名（英文）：" clearable :disabled="!isEdit" size="large" />
            </el-form-item>
            </el-col>
        </el-row>

        <el-row >
            <el-col :span="12">
            <el-form-item label="证件号码：">
                <el-input v-model="memberInfoData.idCard" placeholder="证件号码：" clearable :disabled="!isEdit" size="large" />
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="出生日期：">
                <el-date-picker v-model="memberInfoData.birthday" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="date"
                    placeholder="出生日期：" :disabled="!isEdit" size="large" />
            </el-form-item>
            </el-col>
        </el-row>

        <el-divider content-position="left">地址信息</el-divider>
        <el-row  >
             <el-col :span="12">
                <el-form-item label="省份：">
                <el-input v-model="memberInfoData.province" placeholder="省份：" clearable :disabled="!isEdit" size="large" />

            </el-form-item>
             </el-col>
             <el-col :span="12">
            <el-form-item label="城市：">
                <el-input v-model="memberInfoData.city" placeholder="城市：" clearable :disabled="!isEdit" size="large" />


            </el-form-item>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
            <el-form-item label="邮编：">
                <el-input v-model="memberInfoData.postal" placeholder="邮编：" clearable :disabled="!isEdit" size="large" />
            </el-form-item>

        </el-col>

        </el-row>
        <el-row>

            <el-form-item label="详细地址："  style="width: 100%;">
                <el-input v-model="memberInfoData.address" :rows="2" placeholder="详细地址：" clearable :disabled="!isEdit"
                    size="large" />
            </el-form-item>

        </el-row>
        <el-row  >
            <el-form-item label="英文地址：" style="width: 100%;">
                <el-input v-model="memberInfoData.enAddress" :rows="2" placeholder="英文地址：" clearable :disabled="!isEdit"
                    size="large" />
            </el-form-item>

        </el-row>

    </el-form>
</template>
<script setup lang="ts">
let isEdit = ref(false);
import type { MemberModel } from "@/api/member/index";
import { memberInfoApi } from "@/api/member/index";
import { cloneDeep } from 'lodash'
const memberInfoData = ref<MemberModel>({ id: '', idCard: '', name: '', postal: '', email: '', phone: '', address: '', surname: '', egName: '', birthday: '', province: '', city: '', enAddress: '', workList: [], igAasId: '', educationList: [], createTime: '' })
onMounted(async () => {
    const res = await memberInfoApi()
    if (res.code === 200) {
        memberInfoData.value = cloneDeep(res.data) ?? {
            id: '', idCard: '', name: '', email: '', postal: '', phone: '', address: '', surname: '', egName: '', birthday: '', province: '', city: '', enAddress: '', workList: [], igAasId: '', educationList: [], createTime: ''
        }

    }  
})



</script>
<style scoped lang='less'>
.row {
    display: flex;
    justify-content: flex-start;
    justify-content: space-around;
    padding: 0 20px;
}

.btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jg {
    margin: 0 10px;
}

:deep(.el-form-item__content) {
    justify-content: flex-end;
}

:deep(.el-table tr) {
    background-color: #f6f6f68c;
}

:deep(.el-table__body) {
    background-color: #f6f6f68c;
}

:deep(.btns .el-form-item) {
    width: fit-content;
}

.form-mainInfo .row .el-form-item {
    width: 46%;
}

.form-mainInfo .row .el-form-item__content {
    text-align: left;
}

.form-mainInfo .row .el-radio-group {
    width: 100%;
}

:deep(.el-date-editor.el-input) {
    width: 100%;
}

:deep(.el-form-item__label) {
    width: 100px;
}

:deep(.el-divider__text) {
    margin-bottom: 22px;
    color: #345aa3;
    font-weight: 600;
    padding: 0 10px;
    font-size: 20px;
}</style>
